<script lang="ts" setup>

import { useRouter } from 'vue-router';
import PayMethod from './PayMethod.vue';
import { computed, ref } from 'vue';
const router = useRouter()

const back = () => {
  router.back()
}

const tableData = [
  {
    name: '国际版',
    duration: '1年',
    num: 2,
    price: '50000.00'
  }, {
    name: '国际版',
    duration: '1年',
    num: 2,
    price: '50000.00'
  }, {
    name: '国际版',
    duration: '1年',
    num: 2,
    price: '50000.00'
  },
]

const couponValue = ref(100)

const total = computed(() => {
  return tableData.reduce((prev, val) => Number(val.price) + prev, 0) - couponValue.value
})
// const toCharge = () => {
//   router.push({
//     path: "/finance/charge"
//   })
// }
</script>
<template>
  <div class="container">
    <div class="flex font-bold pt-10 text-lg items-center mb-5 justify-between px-5">
      <div class="flex items-center">
        <img src="/console/document.png" alt="" class="mr-3 h-5" />
        <span>
          确认订单
        </span>
      </div>
      <div>
        <a-button type="link" @click="back">返回</a-button>
      </div>
    </div>

    <div class="rounded xtable">
      <ul class="header hidden md:flex">
        <li>商品名称</li>
        <li>购买时长</li>
        <li>购买数量</li>
        <li>价格</li>
      </ul>
      <ul class="flex flex-col body">
        <li v-for="item in tableData" class="flex-col md:flex-row ">
          <span class="w-full mt-3 md:mt-0 ">
            {{ item.name }}
          </span>
          <span class="w-full mt-3 md:mt-0 ">{{ item.duration }}</span>
          <span class="w-full mt-3 md:mt-0 ">x{{ item.num }}</span>
          <span class="w-full mt-3 mb-3 md:m-0 ">{{ item.price }} 元</span>
        </li>
      </ul>

    </div>
    <div class="coupon rounded">
      <span>
        使用代金券
      </span>
      <span>
        xxxxxxxxxxxxxxx
      </span>
      <div class="last">
        <span>
          抵扣金额：
        </span>
        <span>
          {{ couponValue }}
        </span>
        <span>
          元
        </span>
      </div>
    </div>

    <!--  <div class="rounded coupon  w-full flex-wrap flex justify-end">
      <div class="mr-auto">
        <span class="text-red-600">
          余额不足请
        </span>
        <a-button type="primary" danger @click="toCharge">充值</a-button>
      </div>  <div class="flex mt-10">
        <div class="flex items-center mr-5">
          <span>
            合计：
          </span>
          <span class="font-bold text-2xl text-red-600">
            {{ 1000 }}元
          </span>
        </div>
        <a-button type="primary">确认支付</a-button>
      </div> 
    </div>-->
    <PayMethod :total="total" />

  </div>

</template>
<style lang="scss" scoped>
.xtable {
  border: solid 1px #e1e4f5;
  background-color: #fff;
  width: 100%;

  .body li {
    padding: 0 30px;
    border: 1px solid #e9ecf2;
    border-radius: 5px;
    background-color: #fafbfc;
    margin: 12px 20px;
    display: flex;
    align-items: center;

    span {
      font-size: 14px;
    }

    span:nth-of-type(4) {
      color: #ff6040;
    }
  }
}


.coupon {
  margin-top: 12px;
  padding: 19px 30px;
  border: solid 1px #e1e4f5;
  background-color: #fff;
}


@media (min-width: 770px) {
  .xtable {
    .body li {
      height: 80px;

      span {
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0px;
        color: #333333;
      }

      span:nth-of-type(1) {
        width: 40%;
      }

      span:nth-of-type(2) {
        width: 22%;
      }

      span:nth-of-type(3) {
        width: 18%;
      }

      span:nth-of-type(4) {
        width: 13%;
        color: #ff6040;
      }



    }

    .header {
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #e9ecf2;
      padding: 0 50px;
      width: 100%;
      margin-bottom: 0;

      li {
        color: #8f9bb2;
        font-size: 14px;
      }

      li:nth-of-type(4) {
        width: 13%;
      }

      li:nth-of-type(3) {
        width: 18%;
      }

      li:nth-of-type(2) {
        width: 22%;
      }

      li:nth-of-type(1) {
        width: 40%;
      }

    }
  }
}
</style>
